---
title: "AG Grid Design System"
description: "Customise AG Grid themes and mock-up $framework Data Grid applications with the AG Grid Figma Design system."
---

Our Figma design system allows designers to prototype & customise AG Grid applications with ease.

{% imageCaption imagePath="resources/AG-Grid-Figma-Design-System.png" alt="AG Grid Figma Design System" centered=true constrained=false /%}

The [AG Grid design system](https://www.figma.com/community/file/1360600846643230092) replicates the [Quartz](/example?theme=quartz) and [Alpine](/example?theme=alpine) AG Grid themes within Figma. These default themes can be extended with Figma variables to match any existing visual design or create entirely new AG Grid themes.

The design system has been built from the ground up to be consistent with the javascript library, aiding in the designer - developer handoff process.

## Getting Started

To start working with the AG Grid Figma design system, visit our [Figma community page](https://www.figma.com/community/file/1360600846643230092) and click "Open in Figma". The AG Grid design system will open directly in Figma and you're ready to start designing for AG Grid applications. 

{% note %}
We supply the AG Grid design system as a [Figma community file](https://www.figma.com/community/file/1360600846643230092). You will use the file by duplicating it to your Figma workspace. Whilst we regularly update the AG Grid design system, your duplicated files will not receive any updates automatically.

For more information about how Figma community files function, please review the [Figma help pages on community files](https://help.figma.com/hc/en-us/articles/360038510873-Duplicate-Community-files).
{% /note %}

{% figmaCommunityButton /%}

## Video Introduction & Figma Documentation

You’ll find comprehensive documentation for the design system right within the Figma file. We have guides for getting started and premade grid templates. Further detailed information around how each grid component works is also within the Figma file. 

{% videoSection id="Ymmm7wxLy7Y" title="Introducing the AG Grid Figma Design System" %}
Watch our [short introduction video](https://youtu.be/Ymmm7wxLy7Y) to the design system on Youtube. You'll learn how to get started with the design system, where to find complete grid templates, and how to build your own grids from scratch. After you've absorbed the basics we also have a [playlist of in-depth videos](https://www.youtube.com/watch?v=Ymmm7wxLy7Y&list=PLsZlhayVgqNzE9G1yLLHQCRYSgDvx7Zo1&pp=gAQB) diving deeper into working with the AG Grid design system.
{% /videoSection %}

## Customising the Design System

The AG Grid design system utilises [Figma's native variables feature](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma) for all of its customisable attributes. The majority of the [Theme parameters](./theming-parameters/) used by the Quartz and Alpine themes are referenced within Figma and can be extended to your own theme.

You can find more information about how to create and manage themes within the Figma file under the **Create your own theme** page in the Figma file.

{% imageCaption imagePath="resources/FDS-themes.png" alt="Figma Variable Theming" centered=true constrained=false /%}

## Generating AG Grid Themes From Figma Variables

If you have created your own theme in Figma using the variables feature, you can export those variables and use the [Style Dictionary](https://styledictionary.com/) NPM package to create an [AG Grid theme](./theming-parameters/#setting-theme-parameters). An example Style Dictionary project and full instructions are included in our [design systems GitHub repo](https://github.com/ag-grid/ag-grid-figma-design-system/).

To export your Figma Variables as JSON...

1. In the Resources panel go to the Plugins tab. 
2. Search for the [Design Tokens](https://www.figma.com/community/plugin/888356646278934516/design-tokens) Figma plugin.
3. In the [Design Tokens](https://www.figma.com/community/plugin/888356646278934516/design-tokens) plugin settings enable the options "**Add mode to design token name (if 2 or more modes)**" and "**Add mode to design token value**".
4. Click run for the [Design Tokens](https://www.figma.com/community/plugin/888356646278934516/design-tokens) and select the 'Export Design Tokens File' option. 
5. Deselect all ‘include types...’ except for "Figma Variables"
6. Click the 'Save & Export' button and save the json file.

{% imageCaption imagePath="resources/FDS-export-variables.png" alt="Export Figma Variables" centered=true constrained=false /%}

## Support

AG Grid Enterprise customers can request support or suggest features and improvements via [Zendesk](https://ag-grid.zendesk.com/hc/en-us). Community users can file bug reports via our design system [GitHub repo issues](https://github.com/ag-grid/ag-grid-figma-design-system/issues).

{% br /%}

{% figmaCommunityButton /%}

{% br /%}
{% br /%}
